<style lang='scss' scoped></style>

<template>
  <div class="role-table">
    <baseTable ref="roleTable" :fields="fields" baseURL="/api/role" size="mini" :btns="btns">
      <template slot="toolbar">
      </template>
    </baseTable>
    <el-dialog title="菜单分配" width="40%" :visible.sync="isRoleMenu" @opened="openMenuTree">
      <menu-tree ref="roleMnu"></menu-tree>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="sumbitRoleMenu">确 定</el-button>
        <el-button @click="isRoleMenu = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import MenuTree from '@/views/sys/menu/menu-tree.vue'
import role from './mixins/role'

export default {

  name: 'role-table',

  mixins: [role],

  components: { MenuTree },

  data () {
    return {
      // 是否显示角色菜单
      isRoleMenu: false,
      // 按钮配置
      btns: [
        {
          title: '角色菜单',
          icon: 'icon-fuzhi',
          click: () => {
            this.isRoleMenu = true
          }
        }
      ]
    }
  },

  methods: {
    sumbitRoleMenu () {
      let tree = this.$refs.roleMnu.$refs.tree
      console.log(tree.getCheckedNodes())
      this.isRoleMenu = false
    },

    openMenuTree () {
      const roleMenu = this.$refs.roleMnu
      roleMenu.load()
    }
  }
}

</script>
